
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>排行榜</title>
    <link rel="stylesheet" href="/${BasePath}/static/css/weui.css" media="all" />
    <link rel="stylesheet" href="/${BasePath}/static/css/font-awesome.min.css" media="all" />
    <style type="text/css">
        body{background: #ddcba3;padding-bottom: 65px}
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .img{width: 100%; height:auto;display:block}
        .fixed-bottom{position: fixed;bottom: 0;left: 0;right: 0}
        .flex{padding: 0 15px}
        .flex .placeholder{text-align: center}
        .head{padding: 10px 0 15px;background: #ddc48b}
        .head .weui-flex__item:not(:nth-child(3n)){
            border-right: 1px solid #3e2d26
        }
   		.list-head{margin-top:20px;border-bottom:1px solid #333;padding-bottom:10px;margin-bottom:10px}
   		.list-content .weui-flex{margin-bottom:10px}
   		.weui-flex__item{font-size:0.9rem;text-align:center}
    </style>
    <script type="text/javascript" src="/${BasePath}/static/js/zepto.min.js"></script>
    <script type="text/javascript" src="/${BasePath}/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/${BasePath}/static/js/axios.min.js"></script>
    <script type="text/javascript" src="/${BasePath}/static/js/layer.js"></script>
</head>
<body ontouchstart>
	<div id="app">
	    <div class="swiper-container">
	        <img :src="img1" class="img">
	    </div>
	  
	    <div class="head flex">
	        <div class="weui-flex">
	            <div class="weui-flex__item"><div class="placeholder">已报名<p>{{enroll}}</p></div></div>
	            <div class="weui-flex__item"><div class="placeholder">点赞次数<p>{{thumbs}}</p></div></div>
	            <div class="weui-flex__item"><div class="placeholder">访问量<p>{{visits}}</p></div></div>
	        </div>
	    </div>
	    <div class="list-head">
	    	<div class="weui-flex">
	            <div class="weui-flex__item"><div>排名</div></div>
	            <div class="weui-flex__item"><div>编号</div></div>
	            <div class="weui-flex__item"><div>选手</div></div>
	            <div class="weui-flex__item"><div>获得点赞数</div></div>
	        </div>
	    </div>
	    <div class="list-content">
	    	<div class="weui-flex" v-for="(item,index) in list">
	            <div class="weui-flex__item"><div>{{index+1}}</div></div>
	            <div class="weui-flex__item"><div>{{item.playerno}}</div></div>
	            <div class="weui-flex__item"><div>{{item.name}}</div></div>
	            <div class="weui-flex__item"><div>{{item.poll}}</div></div>
	        </div>
	    </div>
	    <div class="weui-tabbar fixed-bottom">
	        <a :href="'/${BasePath}/free/playerList?activityid=' +activityid" class="weui-tabbar__item ">
	            <span style="display: inline-block;position: relative;">
	                <i class="weui-tabbar__icon fa fa-home"></i>
	            </span>
	            <p class="weui-tabbar__label">首页</p>
	        </a>
	        <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
	            <i class="weui-tabbar__icon fa fa-trophy"></i>
	            <p class="weui-tabbar__label">榜单</p>
	        </a>
	        <a :href="'/${BasePath}/free/toGift?activityid=' +activityid" class="weui-tabbar__item">
	            <i class="weui-tabbar__icon fa fa-gift"></i>
	            <p class="weui-tabbar__label">奖品</p>
	        </a>
	    </div>
	</div>
    <script type="text/javascript" src="/${BasePath}/static/js/common.js"></script>
    <script type="text/javascript">
	    var actid = getUrlParam('activityid');
	    var index;
    	var vm = new Vue({
    		el: '#app',
    		data:{
    			img1: '',
    			img2: '',
    			img3: '',
    			start: '',
    			end: '',
    			thumbs: '',
    			enroll: '',
    			visits: '',
    			music: '',
    			list: [],
    			activityid: ''
    		},
    		beforeCreate:function(){
    			index = layer.open({
		    	    type: 2
		    	    ,content: '加载中'
		    	});
    		},
    		created:function(){
    			this.getData()
    		},
    		methods:{
    			getData:function(){
    				var self = this;
    				axios.get('/${BasePath}/free/getRankList',{
    		    		params:{
    		    			activityid: actid
    		    		}
    		    	})
    		    	.then(function(response){
    		    		self.enroll = response.data.enroll;
    		    		self.thumbs = response.data.thumbs;
    		    		self.img1 = response.data.headpic;
    		    		self.list = response.data.rank;
    		    		self.visits = response.data.visits;
    		    		self.activityid = actid;
    		    		layer.close(index);
    		    	})
    		    	.catch(function(error){
    		    		console.log(error);
    		    	})
    			},
    			say: function(event) {
    		           if(audio.paused){
    		        	   $(".music").addClass('music-play');
    		        	   audio.play();
    		           }
    		           else{
    		        	   $(".music").removeClass('music-play');
    		        	   audio.pause();
    		           }
    		           
    		    }
    		}
    	})
    	
    </script>
</body>
</html>
